<!-- 邀请组件 -->
<template>
  <a-modal
    :visible="modalVisible"
    title="邀请成员"
    :footer="null"
    @cancel="handleCancel">
    <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" :model="formData" :rules="formRules" ref="formRef">
      <a-form-model-item label="编号" prop="researchNo">
        <a-input v-model="formData.researchNo" placeholder="请输入编号" />
      </a-form-model-item>
      <a-form-model-item label="姓名" prop="name">
        <a-input v-model="formData.name" width="100%"/>
      </a-form-model-item>
      <a-form-model-item label="手机" prop="phone">
        <a-input v-model="formData.phone" width="100%"/>
      </a-form-model-item>
      <a-form-model-item label="邮箱" prop="email">
        <a-input v-model="formData.email" width="100%"/>
      </a-form-model-item>
      <a-form-model-item label="组织机构">
        <a-input v-model="hospitalNameProp" disabled width="100%"/>
      </a-form-model-item>
      <a-form-model-item label="选择科室">
        <a-select
          mode="multiple"
          v-model="formData.orgDeptId"
          @change="handleDepartmentChange"
        >
          <a-select-option v-for="item in departmentListProp" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="角色" prop="roleId">
        <!-- 由于需要vue先判断formData.roleList是否存在才会解析roleList.name,故需先判断roleList是否存在，否则报错 -->
        <a-input v-if="formData.roleList" v-model="formData.roleList.name" width="100%"/>
        <a-input v-else width="100%"/>
      </a-form-model-item>
      <a-row :gutter="48">
        <a-col :md="24" :sm="24">
          <a-button type="primary" @click="handleInvitation" style="float: right">发送邀请</a-button>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { sendInvitation } from '@/api/common'
export default {
  props: {
    researchId: { // 研究中心Id
      type: [String, Number],
      default: null
    },
    departmentListProp: { // 科室列表
      type: Array,
      default: () => {
        return []
      }
    },
    hospitalNameProp: {
      type: String,
      default: null
    },
    modalVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      formData: {},
      formRules: {
        researchNo: [{ required: true, message: '请输入编号', trigger: 'change' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号格式错误' }
        ],
        email: [
          { required: false },
          { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: '邮箱格式错误' }
        ],
        orgDeptId: [{ required: true, message: '请选择角色', trigger: 'change' }]
      }
    }
  },
  methods: {
    // 科室选择改变
    handleDepartmentChange (value) {
      this.formData.orgDeptId = value
      console.log(value, '选择的科室')
    },
    // 点击发送邀请
    handleInvitation () {
      if (!this.formData || !this.formData.account) {
        // this.$message.warning('手机号错误，请校验')
        this.$message.warning('未找到与此手机号相关的信息，请校验号码是否正确')
        return false
      }
      const invitationData = {}
        this.formData.orgDeptId = this.formData.orgDeptId.toString()
      invitationData.proId = this.researchId // 父组件传过来的研究中心id
      invitationData.type = this.invitedType // 父组件传来的被邀请人类型
      invitationData.invitedUserId = this.formData.userId // 根据电话号码获取的被邀请人id
      sendInvitation(invitationData)
        .then(res => {
          // 成功发送邀请后，通知父组件刷新列表
          this.handleCancel(1)
          this.$message.success('发送成功')
        })
        .catch(() => {})
    },
    // 点击取消对话框消失
    handleCancel (val) {
      this.$emit('closeModal', val)
      this.$refs.formRef.resetFields()
    }
  }
}
</script>
<style scoped lang="scss">

</style>
